<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta charset="UTF-8">
    <title>四川工商学院失物招领系统</title>
    <%@include file="../common/commHeader.html"%>
</head>
<body style="background:#EEEEEE;">
<%@include file="header.jsp"%>
    <!--主题内容-->
    <div class="col-md-10 col-md-offset-1">
        <!--头部-->
        <div class="col-md-8 laf-detail-left laf-reg">
            <div class="col-md-9 col-md-offset-3">
            <form action="user/register" class="form-horizontal laf-register" role="form" method="post">
                <div class="input-group">
                    <span class="input-group-addon laf-loging-btn">用户名</span>
                    <input type="text" id="userName" name="userName" value="${userinfo.userName}" class="form-control" required  placeholder="请输入用户名">
                    <span class="laf-tooltiptext"><i style="color: #F1BA2C" class="glyphicon glyphicon-exclamation-sign"></i>请使用文明用户名，该用户名将用于登陆此系统</span>
                    <span id="userExist" class="laf-tooltiptext"><i style="color: #F1BA2C" class="glyphicon glyphicon-exclamation-sign"></i>该用户名已存在！请重新尝试其他用户名</span>
                </div>
                <div class="input-group">
                    <span class="input-group-addon laf-loging-btn">密码</span>
                    <input type="password" id="password" name="password" value="${userinfo.password}" class="form-control" required placeholder="请输入密码">
                    <span class="laf-tooltiptext"><i style="color: #F1BA2C" class="glyphicon glyphicon-exclamation-sign"></i>密码请使用字母数字特殊符号的组合，请务必记住此密码</span>
                </div>
                <div class="input-group">
                    <span class="input-group-addon laf-loging-btn">确认密码</span>
                    <input type="password" id="dpassword" class="form-control" value="${userinfo.password}" onblur="validata()" required placeholder="请再次输入密码">
                    <span class="laf-tooltiptext"><i style="color: #F1BA2C" class="glyphicon glyphicon-exclamation-sign"></i>请确保和上一次密码相同</span>
                </div>
                <div class="input-group">
                    <span class="input-group-addon laf-loging-btn">邮箱</span>
                    <input id="email" type="email" name="email" value="${userinfo.email}" class="form-control" required pattern="^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" placeholder="请输入邮箱">
                    <span class="laf-tooltiptext"><i style="color: #F1BA2C" class="glyphicon glyphicon-exclamation-sign"></i>请务必输入邮箱地址，将用于找回用户密码和启事密码</span>
                </div>
                <div class="input-group">
                    <span class="input-group-addon laf-loging-btn">手机号</span>
                    <input id="phone" name="phone" type="text" value="${userinfo.phone}" class="form-control" required pattern="\d{11}" placeholder="请输入手机号">
                    <span class="laf-tooltiptext"><i style="color: #F1BA2C" class="glyphicon glyphicon-exclamation-sign"></i>请务必输入手机号码</span>
                </div>
                <div class="input-group">
                    <span class="input-group-addon laf-loging-btn">密保问题</span>
                    <select class="form-control"  id="queId" name="queId">
                        <c:forEach var="item" items="${queList}">
                            <option value="${item.queId}"  <c:if test="${userinfo.queId == item.queId}">selected</c:if>>${item.title}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="input-group">
                    <span class="input-group-addon laf-loging-btn">密保答案</span>
                    <input id="answer" name="answer" type="text" value="${userinfo.answer}" class="form-control" placeholder="请输入密保答案">
                    <span class="laf-tooltiptext"><i style="color: #F1BA2C" class="glyphicon glyphicon-exclamation-sign"></i>请务必输入密保答案,用于找回密码</span>
                </div>
                <div class="form-group" style="margin-left: 1%">
                    <label for="code" class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-3">
                        <input type="text" name="code" style="margin-left: -10%" id="code" class="form-control" pattern="\w{4}" required >
                    </div>
                    <div class="col-sm-3">
                        <img class="img-responsive" id="codeImage" src="laf/code" title="看不清楚？换一张" alt="验证码" style="margin-top: 2%;margin-left: -15%;cursor: pointer">
                        <span class="laf-tooltiptext"><i style="color: #F1BA2C" class="glyphicon glyphicon-exclamation-sign"></i>验证码输入错误，请重新输入！</span>
                    </div>
                </div>
                <div class="form-group text-center">
                    <div class="col-sm-offset-1 col-sm-6">
                        <button type="submit" class="btn btn-default">注册</button>
                    </div>
                </div>
            </form>
                <p class="text-right">没有账号？<a href="laf/showLogin">马上登陆</a></p>
         </div>
        </div>

        <div class="col-md-3 laf-detail-right">
            <div class="laf-detail-right-top">
                <img src="image/important.jpg" width="100%" alt="">
                <ol>
                    <%@include file="leftInfo.jsp"%>
                </ol>
            </div>
        </div>

        <div class=" col-md-3 laf-detail-right-advertising">
            <img src="image/advan.jpg" width="99%" alt="">
        </div>
</div>
<script>
    function validata(){
        if($('#password').val()!==$('#dpassword').val()){
            $('#dpassword + span').attr('style','visibility: visible;opacity: .9;')
        }
        if($('#password').val()===$('#dpassword').val()){
            $('#dpassword + span').prop('style','')
        }
    }
  $(function () {
      $('#codeImage').click(function () {
          var urlPath='laf/code?r='+new Date().getTime();
          document.getElementById("codeImage").src=urlPath;
      });

      if('${param.codeError}'.length>0){
          $('#codeImage + span').attr('style','visibility: visible;opacity: .9;margin-top: -20%')
      }

      if('${param.status}'.length>0){
          $('#userExist').attr('style','visibility: visible;opacity: .9;')
      }

      $('#username').focus(function () {
          $('#username + span').attr('style','visibility: visible;opacity: .9;')
      });
      $('#username').blur(function () {
          $('#username + span').prop('style','')
      });
      $('#password').focus(function () {
          $('#password + span').attr('style','visibility: visible;opacity: .9;')
      });
      $('#password').blur(function () {
          $('#password + span').prop('style','')
      });
      $('#email').focus(function () {
          $('#email + span').attr('style','visibility: visible;opacity: .9;')
      });
      $('#email').blur(function () {
          $('#email + span').prop('style','')
      });
      $('#phone').focus(function () {
          $('#phone + span').attr('style','visibility: visible;opacity: .9;')
      });
      $('#phone').blur(function () {
          $('#phone + span').prop('style','')
      });
      $('#answer').focus(function () {
          $('#answer + span').attr('style','visibility: visible;opacity: .9;')
      });
      $('#answer').blur(function () {
          $('#answer + span').prop('style','')
      });
  })
</script>
</body>
</html>